<template>
  <div class="box">
    <h3>操作</h3>
    <hr />
    <form
      action="http://localhost/php/php/fileUpload.php"
      method="post"
      enctype="multipart/form-data"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <input type="file" @change="Change('img')" ref="file" />
        </el-form-item>
        <el-form-item label="折扣" prop="zhekou">
          <el-input v-model="form.zhekou"></el-input>
        </el-form-item>
        <el-form-item label="团购" prop="tuangou">
          <el-input v-model="form.tuangou"></el-input>
        </el-form-item>
        <el-form-item label="倒计时" prop="djs">
          <el-input v-model="form.djs"></el-input>
        </el-form-item>
        <el-form-item v-if="type == 'classify'" label="pid" prop="pid">
          <el-input v-model="form.pid"></el-input>
        </el-form-item>
        <el-form-item v-if="type == 'dpbp'" label="pimg" prop="pimg">
          <input type="file" @change="Change('pimg')" ref="files" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(form)">立即创建</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      type: this.$router.currentRoute.params.name,
      form: {
        title: "",
        price: "",
        img: "",
        zhekou: "",
        tuangou: "",
        pid: "",
        djs: ""
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          { trigger: "blur" }
        ],
        zhekou: [
          { required: true, message: "请输入折扣价", trigger: "blur" },
          { trigger: "blur" }
        ],
        price: [
          { required: true, message: "请输入价格", trigger: "blur" },
          { trigger: "blur" }
        ],
        pid: [
          { required: true, message: "请输入pid", trigger: "blur" },
          { trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    Change(type) {
      let file = this.$refs.file.files[0];
      let files = this.$refs.files.files[0];
      let fd = new FormData();
      fd.append("file", file);
      fd.append("files", file);
      if (type == "img") {
        axios({
          method: "post",
          url: "http://localhost/php/php/fileUpload.php",
          data: fd
        }).then(res => {
          this.form.img = res.data.fileNmae;
          console.log(res);
        });
      } else {
        axios({
          method: "post",
          url: "http://localhost/php/php/fileUpload.php",
          data: fd
        }).then(res => {
          this.form.pimg = res.data.fileNmae;
          console.log(res);
        });
      }
    },
    submitForm(formName) {
      this.$refs.ruleForm.validate(valid => {
        if (valid == true || this.type == "classify") {
          axios({
            method: "post",
            url: "http://localhost/yssc/api.php/ysscshops",
            data: this.form
          }).then(res => {
            this.$router.push("/");
            console.log(res);
          });
        } else if (valid == true || this.type == "dpbp") {
          axios({
            method: "post",
            url: "http://localhost/yssc/api.php/dpbp",
            data: this.form
          }).then(res => {
            this.$router.push("/dpbp");
            console.log(res);
          });
        } else {
          return false;
        }
        console.log(this.form)
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    }
  }
};
</script>

<style scoped>
.box {
  width: 1000px;
  margin: 80px auto;
}
hr {
  margin: 30px 0;
}
</style>

